<template>
  <div class="m3u8-page">
    <div>
      <span class="fs-18 color-white"
        >当前监控：{{ selectedCamera ? selectedCamera.name : "" }}</span
      >
      <el-dropdown @command="changeCamera">
        <img
          style="position: relative; top: 1px; width: 15px"
          class="ml-12 cursor-pointer"
          src="@/assets/icons/svg/tree-table.svg"
          alt=""
        />
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, i) in option.camera"
            :command="i"
            :key="item.id"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="videoWrap">
      <div id="mmid"></div>
    </div>
  </div>
</template>
<script>
import HlsJsPlayer from "xgplayer-hls.js";
export default {
  name: "m3u8-page",
  data() {
    return {
      videoPlayer: null,
      selectedCamera: {},
      option: {
        camera: [],
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 请求数据
    getData() {
      let res = {
        data: [
          {
            id: "1",
            name: "视频1",
            url: "http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8",
          },
          {
            id: "2",
            name: "视频2",
            url: "https://open.ys7.com/v3/openlive/K41074775_1_2.m3u8?expire=1675919936&id=543420472029622272&t=254a5b84f8697fefb2bb00743247c15fb5cdfeae4498d203e66fd6f7acaa63a0&ev=100",
          },
        ],
      };
      this.option.camera = res.data;
      this.selectedCamera = res.data[0];
      this.init(this.option.camera.url);
    },
    // 切换按钮
    changeCamera(i) {
      let data = this.option.camera[i];
      if (data.id !== this.selectedCamera.id) {
        this.selectedCamera = data;
        this.init();
      }
    },
    // 初始化
    init(url) {
      this.videoPlayer = new HlsJsPlayer({
        el: document.querySelector("#mmid"),
        url: url,
        width: "100%",
        height: "100%",
        volume: 0.6, // 初始音量
        autoplay: true, // 自动播放
        playsinline: true,
        isLive: false,
        cors: true,
      });
    },
  },
};
</script>
<style>
.m3u8-page {
  width: 800px;
  margin: 0 auto;
}
</style>
<!-- <template>
  <div class="m3u8-page">
    <div ref="video" id="mmid"></div>
  </div>
</template>
<script>
import HlsJsPlayer from "xgplayer-hls.js";
export default {
  name: "m3u8-page",
  data() {
    return {
      videoPlayer: null,
    };
  },
  mounted() {
    this.getVideo();
  },
  methods: {
    getVideo() {
      console.log(
        'document.querySelector("#mmid")',
        document.querySelector("#mmid")
      );
      this.videoPlayer = new HlsJsPlayer({
        el: document.querySelector("#mmid"),
        // url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
        url: "https://open.ys7.com/v3/openlive/J59149487_1_1.m3u8?expire=1706841850&id=543019132876296192&t=e4b7a01034ebdac23431a9a7e891fb2e951c98991fd38c358e36593dbd9a62e1&ev=100",
        // url: "http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8",
        // url: "http://192.168.10.215:8080/live/livestream.flv",
        width: "100%",
        height: "360px",
        volume: 0.6, // 初始音量
        autoplay: true, // 自动播放
        playsinline: true,
        isLive: true,
        cors: true,
      });
    },
  },
};
</script>
<style>
.m3u8-page {
  width: 800px;
  margin: 0 auto;
}
</style> -->
